import {Avatar, Box, Divider, Flex, HStack, Image, ScrollView, Text, VStack} from 'native-base';
import React from 'react';
import {SafeAreaView, useSafeAreaInsets} from 'react-native-safe-area-context';
import SvgIcons from '@/assets/svg';

const Manage = () => {
  const insets = useSafeAreaInsets();
  const renderDivider = () => {
    return <Divider h="2" bg="gray.100" />;
  };
  const renderUser = () => {
    return (
      <>
        <Box w="full" h={insets.top} bg="#daeed4"></Box>
        <HStack bg="#daeed4" px="3" pb="3">
          <Avatar size="20" source={{uri: 'https://alifei01.cfp.cn/creative/vcg/800/new/VCG211458444488.jpg'}}></Avatar>
          <Flex flex={1} pl="3" flexDirection="row" justifyContent="space-between" alignItems="center" justifyItems="space-bwtween">
            <VStack>
              <Text bold fontSize="2xl">
                Jakc·Pearson
              </Text>
              <Text>Today is also a happy day.</Text>
            </VStack>
            <Text bold color="#22c55e">
              个人主页
              <SvgIcons.ChevronLeftIcon style={{transform: [{rotate: '180deg'}]}} width={24} height={24} color="#22c55e" />
            </Text>
          </Flex>
        </HStack>
        {renderDivider()}
      </>
    );
  };
  const renderResources = () => {
    return (
      <>
        <Box px="3" py="2">
          <Flex flexDirection="row" justifyContent="space-between">
            <Text fontSize="lg">我的资源</Text>
            <SvgIcons.ChevronLeftIcon style={{transform: [{rotate: '180deg'}]}} width={24} height={24} color="#22c55e" />
          </Flex>
          <Flex mt="2" flexDirection="row" alignItems="center">
            <VStack flex={1} alignItems="center">
              <Text fontSize="md" color="gray.600">
                核心资源值1
              </Text>
              <Text my="1.5" bold fontSize="xl">
                43232
              </Text>
              <Text fontSize="md" color="gray.600">
                较前日
                <Text bold color="green.700">
                  +5%
                </Text>
              </Text>
            </VStack>
            <Divider w="1px" h="full" />
            <VStack flex={1} alignItems="center">
              <Text fontSize="md" color="gray.600">
                核心资源值2
              </Text>
              <Text my="1.5" bold fontSize="xl">
                43232
              </Text>
              <Text fontSize="md" color="gray.600">
                较前日
                <Text bold color="green.700">
                  -8%
                </Text>
              </Text>
            </VStack>
          </Flex>
        </Box>
        {renderDivider()}
      </>
    );
  };
  const renderList = () => {
    const list = [
      {
        icon: 'https://alifei01.cfp.cn/creative/vcg/800/new/VCG211458444488.jpg',
        title: '人生轨迹',
      },
      {
        icon: 'https://alifei01.cfp.cn/creative/vcg/800/new/VCG211458444488.jpg',
        title: '财富中心',
      },
      {
        icon: 'https://alifei01.cfp.cn/creative/vcg/800/new/VCG211458444488.jpg',
        title: '个人素质',
      },
      {
        icon: 'https://alifei01.cfp.cn/creative/vcg/800/new/VCG211458444488.jpg',
        title: '能力体系',
      },
      {
        icon: 'https://alifei01.cfp.cn/creative/vcg/800/new/VCG211458444488.jpg',
        title: '个人管理',
      },
      {
        icon: 'https://alifei01.cfp.cn/creative/vcg/800/new/VCG211458444488.jpg',
        title: '成长管理',
      },
      {
        icon: 'https://alifei01.cfp.cn/creative/vcg/800/new/VCG211458444488.jpg',
        title: '家庭管理',
      },
      {
        icon: 'https://alifei01.cfp.cn/creative/vcg/800/new/VCG211458444488.jpg',
        title: '资源管理',
      },
      {
        icon: 'https://alifei01.cfp.cn/creative/vcg/800/new/VCG211458444488.jpg',
        title: '我育模拟器',
      },
      {
        icon: 'https://alifei01.cfp.cn/creative/vcg/800/new/VCG211458444488.jpg',
        title: '我育工具箱',
      },
      {
        icon: 'https://alifei01.cfp.cn/creative/vcg/800/new/VCG211458444488.jpg',
        title: '系统设置',
      },
    ];
    return (
      <Box pb="10">
        {list.map((item, index) => {
          return (
            <Box flexDir="row" borderBottomColor="gray.300" borderBottomWidth={index === list.length - 1 ? 0 : 1} py="4" mx="4" key={item.title} justifyItems="center" alignItems="center">
              <Flex flex={1} flexDir="row" alignItems="center">
                <Image source={{uri: item.icon}} alt="图片" size="10" />
                <Text fontSize="md" pl="3">
                  {item.title}
                </Text>
              </Flex>
              <SvgIcons.ChevronLeftIcon style={{transform: [{rotate: '180deg'}]}} width={24} height={24} color="#52525b" />
            </Box>
          );
        })}
      </Box>
    );
  };
  return (
    <SafeAreaView style={{flex: 1}} edges={['left', 'right']}>
      <Box w="full" h="full">
        <ScrollView showsVerticalScrollIndicator={false} bounces={false}>
          {renderUser()}
          {renderResources()}
          {renderList()}
        </ScrollView>
      </Box>
    </SafeAreaView>
  );
};

export default Manage;
